<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
	<style>
		*
		{
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		body {
			display: flex;
			justify-content: center;
			align-items: center;
			min-height:100vh;
			background: #ebf5fc;
		}

		ul {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			border-radius: 10px;
			padding: 20px;
			width: 240px;
			background: #ebf5fc;
			box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
			3px 3px 5px rgba(0, 0, 0, 0.1);


			& li {
				position: relative;
				list-style: none;
				text-align: center;
				margin: 15px;

				& label {
					position: relative;
					cursor: pointer;

					& input[type="checkbox"] {
						position: absolute;
						opacity: 0;
					}

					& :checked ~ .icon-box {
						box-shadow: inset -2px -2px 5px rgba(255, 255, 255, 1),
						inset 3px 3px 5px rgba(0, 0, 0, 0.1);

						& .fa {
							transform: scale(0.95);
						}
					}

					& .icon-box {
						width: 60px;
						height: 60px;
						background: #ebf5fc;
						display: flex;
						justify-content: center;
						align-items: center;
						box-shadow: -2px -2px 5px rgba(255, 255, 255, 1),
						3px 3px 5px rgba(0, 0, 0, 0.1);
						border-radius: 10px;

						& .fa {
							font-size: 30px;
							color: #6a9bd8;
						}

					}
				}
			}
		}


		/* --------Social Icons-------- */

		/* Color Variables */
		$color-codepen: #000;
		$color-twitter: #2b97f1;
		/* Social Icon Mixin */
		@mixin social-icon($color) {
			background: $color;
			color: #fff;

			.tooltip {
				background: $color;
				color: currentColor;

				&:after {
					border-top-color: $color;
				}
			}
		}

		.social-icons {
			display: flex;
			position: absolute;
			bottom: 25px;
			right: 25px;
		}

		.social-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			width: 40px;
			height: 40px;
			margin: 0 0.7rem;
			border-radius: 50%;
			cursor: pointer;
			font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
			font-size: 1.5rem;
			text-decoration: none;
			transition: all 0.15s ease;

			&:hover {
				color: #fff;

				.tooltip {
					visibility: visible;
					opacity: 1;
					transform: translate(-50%, -150%);
				}
			}

			&:active {
				box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5) inset;
			}

			&--twitter { @include social-icon($color-twitter); }
			&--codepen { @include social-icon($color-codepen); }

			i {
				position: relative;
				top: 1px;
			}
		}

		/* Tooltips */
		.tooltip {
			display: block;
			position: absolute;
			top: 0;
			left: 50%;
			padding: 0.4rem 0.6rem;
			border-radius: 40px;
			font-size: 0.4rem;
			font-weight: bold;
			opacity: 0;
			pointer-events: none;
			text-transform: uppercase;
			transform: translate(-50%, -100%);
			transition: all 0.3s ease;
			z-index: 1;

			&:after {
				display: block;
				position: absolute;
				bottom: 1px;
				left: 50%;
				width: 0;
				height: 0;
				content: "";
				border: solid;
				border-width: 10px 10px 0 10px;
				border-color: transparent;
				transform: translate(-50%, 100%);
			}
		}
	</style>
	<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">

</head>
<body>
<ul>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-home" aria-hidden="true"></i>
			</div>
		</label>
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-phone" aria-hidden="true"></i>
			</div>
		</label>
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-plane" aria-hidden="true"></i>
			</div>
		</label>
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-snowflake-o" aria-hidden="true"></i>
			</div>
		</label>
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-battery-full" aria-hidden="true"></i>
			</div>
		</label>
	</li>
	<li>
		<label>
			<input type="checkbox" name="">
			<div class="icon-box">
				<i class="fa fa-code" aria-hidden="true"></i>
			</div>
		</label>
	</li>
</ul>

<!--   Social Connections -->
<div class="social-icons">
	<a class="social-icon social-icon--codepen" href="https://codepen.io/braydoncoyer" target="_blank">
		<i class="fa fa-codepen"></i>
		<div class="tooltip">Codepen</div>
	</a>
	<a class="social-icon social-icon--twitter" href="https://twitter.com/BraydonCoyer" target="_blank">
		<i class="fa fa-twitter"></i>
		<div class="tooltip">Twitter</div>
	</a>
</div>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>
<script>

</script>
</body>
</html>